<template>
    <div style="margin-bottom: 10px; width: 100%;" :style="{height: max_Height + 'px'}">
        <div ref="chart" style="width:99%;min-height:95%;max-height: 99%;overflow: auto"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_dataMart} from "@/utils/loadPage";

// 数据集
export default {
    name: 'DataMart',
    data() {
        return {
            max_Height: heightConfig3(),
            form: {
                title: '设备活跃率',  // 图表标题
                title_center: '40px', // 标题位置
                dimensions:[], // 维度 (数据集的分类)
                dataList: [] // 所有数据
            },
        }
    },
    mounted() {
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option()
        },

        set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart) // 初始化 ECharts 实例
            let option = set_option_dataMart(this, this.form)
            this.myChart.setOption(option) // 设置图表选项
        },

        get_data() {
            this.form.dimensions = ['product', '60-70', '70-80', '80以上']
            this.form.dataList = [
                {product: '一键通', '60-70': 43.3, '70-80': 85.8, '80以上': 93.7},
                {product: '血压计', '60-70': 83.1, '70-80': 73.4, '80以上': 55.1},
                {product: '血糖计', '60-70': 86.4, '70-80': 65.2, '80以上': 82.5},
                {product: '血氧仪', '60-70': 72.4, '70-80': 53.9, '80以上': 39.1}
            ]

        }
    }

}


</script>

<style scoped lang="scss">

</style>
